<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        .layout {
            width: 375px;
            height: 667px;
            margin: 50px auto;
            border: solid gray 0px;
        }
        ul {
            position: relative;
            /*left: -21%;*/
            top: 10%;
        }
        img {
            height: 76px;
            width: 76px;
            position:relative;
            left:10px;
            top:10px;
        }
        .media-body{
            position:relative;
            top:10px;
            height: 300px;

        }
    </style>
</head>
<body>
<div class="layout">
<div style="border: solid black 0px;margin-top: 60px;margin-left: 10px;margin-right: 10px;line-height:10px;height: 110px;white-space:normal">
<div class="media">

    <div class="media-left" style="" align="center">

        <img class="media-object" src="pic/doctor.jpg" alt="...">

    </div>


    <div class="media-body" id="doctor">
        <h4 class='media-heading'>姓名：</h4>
        <h4><p class="_p1">剩余挂号数：</p></h4>
        <h4><p class="_p2">职位：</p></h4>
        <h4><div class="_p3"></div></h4>
        <h4><a href="doctordetails.html">挂号</a></h4>
    </div>

</div>
</div>
</div>
</body>

<script>
    $.ajax({
        url:"/staffinfo/xiangqing",
        type:"get",
        dataType:"json",
        success: function (data) {

            for(var i in data){

                $(".media-heading").append(data[i].staname);
                $("._p1").append(data[i].surplusnum);
                $("._p2").append(data[i].postitle);
                $("._p3").append(data[i].smiaoshu);
            }


        }


    })




</script>



</html>